<style>
    .m-container {
        height: 550px;
        border: 1px solid #CCCCCC;
        border-radius: 10px;
        padding: 10px;
        position: relative;
    }

    .m-bottom-menu {
        position: absolute;
        bottom: 20px;
        display: flex;
        text-align: center;
    }

    .m-bottom-menu #menu-list {
        display: flex;
    }


    .menu-plus {
        margin-top: 10px;
    }

    .m-bottom-menu .menu-item {
        margin: 0 1px;
    }

    .m-bottom-menu .menu-item-sub {
        position: absolute;
        bottom: 35px;
        text-align: center;
        display: none;
    }
</style>
<div class="layui-row">
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md3 ">
        <div class="layui-card">
            <div class="layui-card-body">

                <div class="m-container">

                    <div class="m-bottom-menu">

                        <div id="menu-list">

                        </div>

                    </div>
                </div>

                <div class="menu-plus">
                    <button id="menu-add" type="button"
                            class="layui-btn layui-btn-normal layui-btn-sm">
                        {{ __('wechat.add_menu') }}
                        <i class="layui-icon layui-icon-add-1"></i>
                    </button>
                    <div class="layui-word-aux">
                        {{ __('wechat.add_menu_max_tip') }}
                    </div>
                    <div class="layui-word-aux">
                        {{ __('wechat.add_sub_menu_max_tip') }}
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="layui-col-xs12 layui-col-sm6 layui-col-md7 ">
        <form class="layui-form" lay-filter="menu-setting">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    {{ __('wechat.menu_name') }}
                    <span class="layui-font-red">*</span>
                </label>
                <div class="layui-input-block">
                    <input type="text"
                           name="menu_name"
                           value=""
                           class="layui-input">
                    <div class="layui-word-aux">
                        {{ __('wechat.menu_name_tip') }}
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    {{ __('wechat.menu_type') }}
                    <span class="layui-font-red">*</span>
                </label>
                <div class="layui-input-block">
                    <input type="radio" name="menu_type" lay-filter="menu_type" value="click" title="{{ __('wechat.menu_event_click') }}">
                    <input type="radio" name="menu_type" lay-filter="menu_type" value="view" title="{{ __('wechat.menu_event_view') }}">
                    <input type="radio" name="menu_type" lay-filter="menu_type" value="miniprogram" title="{{ __('wechat.menu_event_mini') }}">
                    <input type="radio" name="menu_type" lay-filter="menu_type" value="scancode_push" title="{{ __('wechat.menu_event_scan') }}">
                    <input type="radio" name="menu_type" lay-filter="menu_type" value="scancode_waitmsg"
                           title="scancode_waitmsg">
                    <input type="radio" name="menu_type" lay-filter="menu_type" value="pic_sysphoto" title="{{ __('wechat.menu_event_photo') }}">
                    <input type="radio" name="menu_type" lay-filter="menu_type" value="pic_photo_or_album"
                           title="{{ __('wechat.menu_event_photo_or_album') }}">
                    <input type="radio" name="menu_type" lay-filter="menu_type" value="pic_weixin" title="{{ __('wechat.menu_event_album') }}">
                    <input type="radio" name="menu_type" lay-filter="menu_type" value="location_select"
                           title="{{ __('wechat.menu_event_location_select') }}">
                    <input type="radio" name="menu_type" lay-filter="menu_type" value="media_id" title="media id">
                    <input type="radio" name="menu_type" lay-filter="menu_type" value="article_id" title="article id">
                    <input type="radio" name="menu_type" lay-filter="menu_type" value="article_view_limited"
                           title="article view limited">
                    <div class="layui-word-aux">
                        {{ __('wechat.menu_type_tip') }}
                    </div>
                </div>
            </div>

            <div id="menu-type-click" class="layui-hide">
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        {{ __('wechat.menu_key') }}
                        <span class="layui-font-red">*</span>
                    </label>
                    <div class="layui-input-block">
                        <input type="text"
                               name="menu_key"
                               value="{{ setting.menu_key|default('') }}"
                               class="layui-input">
                        <div class="layui-word-aux">
                            {{ __('wechat.menu_key_tip') }}
                        </div>
                    </div>
                </div>
            </div>


            <div id="menu-type-url" class="layui-hide">
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        {{ __('wechat.menu_url') }}
                    </label>
                    <div class="layui-input-block">
                        <input type="text"
                               name="menu_url"
                               value="{{ setting.menu_url|default('') }}"
                               class="layui-input">
                        <div class="layui-word-aux">
                            {{ __('wechat.menu_url_tip') }}
                        </div>
                    </div>
                </div>
            </div>

            <div id="menu-type-miniprogram" class="layui-hide">

                <div class="layui-form-item">
                    <label class="layui-form-label">
                        {{ __('wechat.menu_appid') }}
                    </label>
                    <div class="layui-input-block">
                        <input type="text"
                               name="menu_appid"
                               value="{{ setting.menu_appid|default('') }}"
                               class="layui-input">
                        <div class="layui-word-aux">
                            {{ __('wechat.menu_appid_tip') }}
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">
                        {{ __('wechat.menu_pagepath') }}
                    </label>
                    <div class="layui-input-block">
                        <input type="text"
                               name="menu_pagepath"
                               value="{{ setting.menu_appid|default('') }}"
                               class="layui-input">
                        <div class="layui-word-aux">
                            {{ __('wechat.menu_pagepath_tip') }}
                        </div>
                    </div>
                </div>
            </div>

            <div id="menu-type-media-id" class="layui-hide">
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        {{ __('wechat.menu_media_id') }}
                    </label>
                    <div class="layui-input-block">
                        <input type="text"
                               name="menu_media_id"
                               value="{{ setting.menu_media_id|default('') }}"
                               class="layui-input">
                        <div class="layui-word-aux">
                            {{ __('wechat.menu_media_id_tip') }}
                        </div>
                    </div>
                </div>
            </div>

            <div id="menu-type-article-id" class="layui-hide">
                <div class="layui-form-item">
                    <label class="layui-form-label">
                        {{ __('wechat.menu_article_id') }}
                    </label>
                    <div class="layui-input-block">
                        <input type="text"
                               name="menu_article_id"
                               value="{{ setting.menu_url|default('') }}"
                               class="layui-input">
                        <div class="layui-word-aux">
                            {{ __('wechat.menu_article_id_tip') }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"
                        lay-submit
                        lay-filter="menu-setting-save">
                    {{ __('btn.save') }}
                </button>

                <button type="button" class="layui-btn layui-btn-danger layui-btn-sm"
                        id="menu-setting-remove">
                    {{ __('btn.delete') }}
                </button>
            </div>

            <hr>

            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm"
                        lay-submit
                        lay-filter="reset-wechat-menu">
                    {{ __('wechat.reset_wechat_menu') }}
                </button>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <div class="layui-word-aux">
                        {{ __('wechat.update_menu') }}
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>